<template>
  <div class="parkSet_box">
    <h1>停车场管理</h1>

    <!-- 新增停车场 -->
    <el-button type="info" class="ParkSet_btn" @click="addParkSetVisible = true">新增停车场</el-button>

    <!-- 搜索停车场名称 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="停车场名称">
        <el-input placeholder="请输入停车场名称" v-model="searchData.title" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增停车场对话框 -->
    <el-dialog v-model="addParkSetVisible" title="新增停车场">
      <el-form :model="addParkSetData">
        <el-form-item label="停车场名称" :label-width="formLabelWidth">
          <el-input v-model="addParkSetData.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="停车场广告" :label-width="formLabelWidth">
          <el-input v-model="addParkSetData.msg" autocomplete="off" />
        </el-form-item>
        <el-form-item label="收费标准" :label-width="formLabelWidth">
          <el-input v-model="addParkSetData.cashlevel" autocomplete="off" placeholder="（默认1元/30分钟）" />
        </el-form-item>
        <el-form-item label="停车场容量" :label-width="formLabelWidth">
          <el-input v-model="addParkSetData.carnum" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addParkSetVisible = false">取消</el-button>
          <el-button type="info" @click="addParkSetFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 停车场列表 -->
    <el-table :data="parkSetData" style="width: 100%" fit>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="id" label="停车场id" />
      <el-table-column prop="title" label="停车场名称" />
      <el-table-column prop="msg" label="停车场宣传广告" />
      <el-table-column prop="carnum" label="停车场容量" />
      <el-table-column prop="cashlevel" label="收费标准（默认1元/30分钟）" />
      <el-table-column prop="isdel" label="账号是否作废" :formatter="isdelFormatter" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="info" plain @click="editParkSet(scope)">编辑</el-button>
          <el-button type="danger" plain @click="disableParkSet(scope)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑停车场对话框 -->
    <el-dialog v-model="editParkSetVisible" title="新增停车场">
      <el-form :model="editParkSetData">
        <el-form-item label="停车场名称" :label-width="formLabelWidth">
          <el-input v-model="editParkSetData.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="停车场广告" :label-width="formLabelWidth">
          <el-input v-model="editParkSetData.msg" autocomplete="off" />
        </el-form-item>
        <el-form-item label="停车场容量" :label-width="formLabelWidth">
          <el-input v-model="editParkSetData.carnum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="是否禁用" :label-width="formLabelWidth">
          <el-select v-model="editParkSetData.isdel" placeholder="请选择是否禁用" style="width: 100%;">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editParkSetVisible = false">取消</el-button>
          <el-button type="info" @click="editParkSetFn">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination v-model:current-page="paging.currentPage" :page-size="10" :pager-count="11"
        layout="prev, pager, next" :total="count" @current-change="changeCurrent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getParkSetAPI, addParkSetAPI, editParkSetAPI, delParkSetAPI } from "@/api/parksetting"
import type { IParkSetData, IParkSetList } from "@/untils/type"
import { ref, reactive } from "vue"
import { ElMessage } from 'element-plus'
// import { useStore } from 'vuex'

// const store = useStore();
const formLabelWidth = '90px'

let count = ref<number>(0);
let parkSetData: Array<IParkSetList> = reactive<Array<IParkSetList>>([]);
let addParkSetVisible = ref<boolean>(false);
let editParkSetVisible = ref<boolean>(false);
let paging = reactive({
  currentPage: 1,
  pageSize: 10
})
let addParkSetData = reactive({
  cashlevel: null,
  title: '',
  msg: '',
  carnum: null
})
let editParkSetData = reactive({
  id: '',
  title: '',
  msg: '',
  carnum: null,
  isdel: null,
})
let searchData=reactive({
  title: '',
})

// 是否作废数据格式化
function isdelFormatter(row: any) {
  // console.log(row);
  if (row.isdel == 0) {
    return "否"
  }
  if (row.isdel == 1) {
    return "是"
  }
}

// 获取停车场信息
function loadParkSet(data?: IParkSetData) {
  getParkSetAPI({ ...data }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      parkSetData.splice(0, parkSetData.length, ...res.data);
      count.value = res.total;
      // store.dispatch('GET_PARKSET',res.data);

    }
  })
}
loadParkSet();

// 分页
function changeCurrent() {
  loadParkSet(paging)
}

//新增停车场
function addParkSetFn() {
  addParkSetAPI({
    ...addParkSetData
  }).then((res: any) => {
    console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
      loadParkSet();
      addParkSetData.cashlevel = null;
      addParkSetData.title = '';
      addParkSetData.msg = '';
      addParkSetData.carnum = null;
    }

  })
}

// 编辑停车场
function editParkSet(scope: any) {
  editParkSetVisible.value = true;
  editParkSetData.title = scope.row.title;
  editParkSetData.msg = scope.row.msg;
  editParkSetData.carnum = scope.row.carnum;
  editParkSetData.isdel = scope.row.isdel;
  editParkSetData.id = scope.row.id;
}

//修改停车场数据
function editParkSetFn() {
  editParkSetAPI({
    ...editParkSetData
  }).then((res: any) => {
    // console.log(res);
    ElMessage({
      showClose: true,
      message: res.msg,
    })
    loadParkSet();
    editParkSetVisible.value = false;
  })
}

//禁用停车场
function disableParkSet(scope: any) {
  delParkSetAPI({
    id: scope.row.id
  }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      ElMessage({
        showClose: true,
        message: res.msg,
      })
      loadParkSet();
    }
  })
}

// 搜索
function searchFn(){
  // console.log(searchData);
  loadParkSet(searchData)
}

</script>

<style lang="less" scoped>
.parkSet_box {
  width: 100%;
  height: 100%;

  .ParkSet_btn {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .paging {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
  }
}
</style>